<template>
	<view class="">
		<view class="content">
			<view class="inv-h-w">
			        <view :class="['inv-h',Inv==0?'inv-h-se':'']" @click="Inv=0">设计图纸</view>
			        <view :class="['inv-h',Inv==1?'inv-h-se':'']" @click="Inv=1">机装</view>
					<view :class="['inv-h',Inv==2?'inv-h-se':'']" @click="Inv=2">软装</view>
					<view :class="['inv-h',Inv==3?'inv-h-se':'']" @click="Inv=3">验收</view>
			</view>
			<view class="">
				<view class="" v-show="Inv == 0">
					<uni-section title="设计图纸" type="line"></uni-section>
					<view class="example-body">
						<view v-for="item in designItem" :key="item.itemId" class="example-box" @click="clickCard(item)">
							<uni-card :title="item.itemName" :note="item.endtime" :extra="item.schedule">
								<text class="content-box-text">{{ item.details }}</text>
							</uni-card>
						</view>
					</view>
					<button class="button" :disabled="disabled1" @click="payment('图纸设计',0.4)">去支付</button>
				</view>
				<view class="" v-show="Inv == 1">
					<uni-section title="机装事项" type="line"></uni-section>
					<view class="example-body">
						<view v-for="item in jizhuangItem" :key="item.itemId" class="example-box" @click="clickCard(item)">
							<uni-card :title="item.itemName" :note="item.endtime" :extra="item.schedule">
								<text class="content-box-text">{{ item.details }}</text>
							</uni-card>
						</view>
					</view>
					<button class="button" :disabled="disabled2" @click="payment('机装',0.2)">去支付</button>
				</view>
				<view class="" v-show="Inv == 2">
					<uni-section title="软装事项" type="line"></uni-section>
					<view class="example-body">
						<view v-for="item in ruanzhuangItem" :key="item.itemId" class="example-box" @click="clickCard(item)">
							<uni-card :title="item.itemName" :note="item.endtime" :extra="item.schedule">
								<text class="content-box-text">{{ item.details }}</text>
							</uni-card>
						</view>
					</view>
					<button class="button" :disabled="disabled3" @click="payment('软装',0.2)">去支付</button>
				</view>
				<view class="" v-show="Inv == 3">
					<uni-section title="验收情况" type="line"></uni-section>
					<view class="example-body">
						<view v-for="item in yanshouItem" :key="item.itemId" class="example-box" @click="clickCard(item)">
							<uni-card :title="item.itemName" :note="item.endtime" :extra="item.schedule">
								<text class="content-box-text">{{ item.details }}</text>
							</uni-card>
						</view>
					</view>
					<button class="button" :disabled="disabled4" @click="payment('验收',0.2)">去支付</button>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import uniList from "@/components/uni-list/uni-list.vue"
	import uniListItem from "@/components/uni-list-item/uni-list-item.vue"
	import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue'
	import uniCard from '@/components/uni-card/uni-card.vue'
	export default {
		components: {
			uniSearchBar,
			uniCard,
			uniList,
			uniListItem
		},
		data() {
			return {
				myCount:'',
				project:'',
				Inv:0,
				tupian:"",
				loadTxt:"",
				designItem:[],
				jizhuangItem:[],
				ruanzhuangItem:[],
				yanshouItem:[],
				disabled1:false,
				disabled2:false,
				disabled3:false,
				disabled4:false
			}
		},
		onLoad:function(option){
			try {
				this.myCount = uni.getStorageSync("myCount");
			} catch(e) {
				console.log("获取个人信息失败")
			}
			this.project = JSON.parse(option.project);
			this.setInv();
			this.distributionItem();
			this.getPicture(this.project.proId);
			this.getDisabled();
			this.itemIsNull();
		},
		methods: {
			clickCard:function(item){
				if(item.schedule === '待完成'){
					uni.showToast({
						icon:'loading',
					    title: '该事项未完成',
					    duration: 1000
					});
				}else if(item.schedule === '完成' || item.schedule === '满意'){
					uni.navigateTo({
						url:'showItem/showItem?item='+JSON.stringify(item)
					})
				}
			},
			payment:function(schedule, num){
				var money = parseFloat(((this.project.fund)*num).toFixed(2));
				var flag = true;
				if(schedule === '图纸设计'){
					flag = this.allFinshi(this.designItem);
				}else if(schedule === '机装'){
					flag = this.allFinshi(this.jizhuangItem);
				}else if(schedule === '软装'){
					flag = this.allFinshi(this.ruanzhuangItem);
				}else if(schedule === '验收'){
					flag = this.allFinshi(this.yanshouItem);
				}
				if(!flag){
					uni.navigateTo({
						url:'../alipay/pay?userId='+this.myCount.userId+'&proId='+this.project.proId+'&proName='+this.project.proName+'&schedule='+schedule+'&fund='+money
					})
				}else{
					uni.showToast({
						icon:'loading',
					    title: '还有事项未通过',
					    duration: 1000
					});
				}
					
			},
			allFinshi(items){
				if(items.length == 0){
					return true;
				}
				for(let i=0; i<items.length; i++){
					if(items[i].schedule != '满意'){
						return true;
					}
				}
				return false;
			},
			getDisabled:function(){//根据查询到的订单判断每个阶段的支付按钮是否可点
				uni.request({
					url: 'http://'+global.address+':8081/orderInfo/selectByProId/'+this.project.proId,
					success: (res) => {
						var orders = res.data;
						for(let i=0; i<orders.length; i++){
							if(orders[i].proSchedule === '图纸设计'){
								this.disabled1 = true;
							}else if(orders[i].proSchedule === '机装'){
								this.disabled2 = true;
							}else if(orders[i].proSchedule === '软装'){
								this.disabled3 = true;
							}else if(orders[i].proSchedule === '验收'){
								this.disabled4 = true;
							}
						}
					}
				})
			},
			getPicture:function(proId){//根据事项id获取图片
			console.log(this.designItem[0].itemId)
				if(this.designItem.length > 0){
					uni.request({
						url:"http://"+global.address+":8081/picture/selectpic/"+this.designItem[0].itemId,
						method:"GET",
						success: (res) => {
							this.tupian = res.data;
						}
					})
				}
			},
			setInv:function(){//按照项目当前进度跳转到对应页
				if(this.project.schedule === '图纸设计'){
					this.Inv = 0;
				}else if(this.project.schedule === '机装'){
					this.Inv = 1;
				}else if(this.project.schedule === '软装'){
					this.Inv = 2;
				}else if(this.project.schedule === '验收'){
					this.Inv = 3;
				}
			},
			distributionItem:function(){//把项目的事项分配到各阶段事项中
				for(var i=0; i<this.project.items.length; i++){
					let tempItem = this.project.items[i];
					console.log(JSON.stringify(tempItem))
					if(tempItem.proSchedule === '图纸设计'){
						this.designItem.push(tempItem);
					}else if(tempItem.proSchedule === '机装'){
						this.jizhuangItem.push(tempItem);
					}else if(tempItem.proSchedule === '软装'){
						this.ruanzhuangItem.push(tempItem);
					}else if(tempItem.proSchedule === '验收'){
						this.yanshouItem.push(tempItem);
					}
				}
			},
			itemIsNull:function(){
				if(this.designItem.length == 0){
					this.disabled1 = true;
				}
				if(this.jizhuangItem.length == 0){
					this.disabled2 = true;
				}
				if(this.ruanzhuangItem.length == 0){
					this.disabled3 = true;
				}
				if(this.yanshouItem.length == 0){
					this.disabled4 = true;
				}
			},
			previewPhoto(path) {
				let imgs = [];
				imgs.push(path)
				uni.previewImage({
					urls: imgs,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			}
		}
	}
</script>
<style lang="less">
	.button{
		background-color:#1CBBB4;
		width: 100%;
		margin-right: 0;
		position: fixed;  
		bottom: 0rpx;
	}
	.addItem{
		size: 50rpx;
		margin-top: 30px;
	}
	.content{
		width: 100%;
	}
	.bg-img{
		float: left;
		margin: 35rpx 25rpx;
	}
	.inv-h-w{background-color: #FFFFFF;height: 100upx;display: flex;}
	.inv-h{font-size: 30upx;flex: 1;text-align: center;color: #C9C9C9;height: 100upx;line-height: 100upx;}
	.inv-h-se{color: #FF9014;border-bottom: 4upx solid #FF9014;}
	page{background-color: #F2F2F2;}
	.imageContent{
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		text-align: center;
	}
	page {
		background-color: #eee;
	}
	
	.list-box {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: flex-start;
		align-content: flex-start;
		padding: 20upx 20upx 0 20upx;
		line-height: 30upx;
		font-size: 28upx;
		color: #333;
	
		&>view {
			background-color: #fff;
			width: 345upx;
			padding: 20upx;
			margin-bottom: 20upx;
			box-sizing: border-box;
			opacity: 0;
			transform:translateY(40upx);
			transition: all 0.3s ease-in-out 0s;
			
			&.active{
				opacity: 1;
				transform:translateY(0);
			}
		}
		
		image{
			width: 100%;
			height: 300upx;
			margin-bottom: 10upx;
		}
	}
	
	.load{
		line-height: 80upx;
		text-align: center;
		font-size: 24upx;
		color: #999;
		padding-bottom: 20rpx;
	}
</style>
